<!--
 * @Description    : 腾讯云验证码
 * @Version        : 1.0.0
 * @Author         : QianLong
 * @Date           : 2021-04-22 20:28:21
 * @LastEditors    : QianLong
 * @LastEditTime   : 2021-05-11 11:31:24
-->
<template>
  <div>
    <div :id="id" :data-appid="appId" data-cbfn="callback"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue'

export default defineComponent({
  name: 'TencentCaptcha',
  props: {
    id: {
      type: String,
      default: 'wrap'
    },
    appId: {
      type: String,
      default: ''
    }
  },
  emits: ['callback', 'onFail', 'onError'],
  setup(props, { emit }) {
    const state = reactive<any>({
      captcha: null
    })
    onMounted(() => {
      initCaptcha()
    })
    function initCaptcha() {
      /* eslint-disable no-new */
      state.captcha = new (window as any).TencentCaptcha(props.appId, function (res) {
        emit('callback', res)
      })
    }
    function verifyShow() {
      state.captcha.show()
    }
    function verifyHide() {
      if (state.captcha) {
        state.captcha.destroy()
      }
    }
    return {
      state,
      verifyShow,
      verifyHide,
      initCaptcha
    }
  }
})
</script>

<style scoped></style>
